import React, { memo, useState, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { SongWrap } from "./style";
import CheckSongBoxShow from "@/components/songPageComment/CheckSongBoxShow";
import ImgBox from "@/components/imgComponent/imgBox";
import { getTopPlaylistAxios } from "./store/actionType";
import { NavLink } from "react-router-dom";
import Pagination from "@/components/pagination";

export default memo(function Songs(props) {
  const dispatch = useDispatch();

  const [pageState, setPageState] = useState(1);

  useEffect(() => {
    dispatch(
      getTopPlaylistAxios(
        props.location.pathname.split("/")[3],
        35,
        (pageState - 1) * 35
      )
    );
  }, [props, dispatch, pageState]);

  const state = useSelector(
    (state) => ({
      playlists: state.getIn(["songs", "playlists"]),
    }),
    shallowEqual
  );

  const getPage = (page) => {
    setPageState(page);
  };

  document.title = `${
    props.location.pathname.split("/")[3] == undefined ||
    props.location.pathname.split("/")[3] == ""
      ? "全部"
      : props.location.pathname.split("/")[3]
  }歌单 - 歌单 - 网易云音乐`;
  return (
    <SongWrap>
      <div className="songBox wrap-v2">
        <CheckSongBoxShow getPage={getPage} props={props} />
        <div className="song-box-content">
          <ul>
            {state.playlists.length !== 0
              ? state.playlists.playlists.map((item, index) => {
                  return (
                    <li className="fl" key={index + Math.random()}>
                      <div className="playlist-b-box">
                        <ImgBox
                          name={item.name}
                          playCount={item.playCount}
                          imgUrl={item.coverImgUrl}
                          userId={item.id}
                        />
                        <div className="playlist-p">
                          <p>
                            <NavLink
                              to={{
                                pathname: "/discover/playlist/" + item.id,
                                query: { id: item.id },
                              }}
                            >
                              {item.name}
                            </NavLink>
                          </p>
                          <p>by&nbsp;{item.creator.nickname}</p>
                        </div>
                      </div>
                    </li>
                  );
                })
              : ""}
          </ul>
        </div>
        <Pagination
          page={pageState}
          size={35}
          getPage={getPage}
          total={state.playlists.total}
        />
      </div>
    </SongWrap>
  );
});
